<template>
	<view class="memory-create">

		<view class="top" style="z-index: 2;">
			<uni-icons style="margin-left: 20rpx;" type="left" size="25" color="#9f9f9f" @click="toBackPage">
			</uni-icons>
		</view>

		<view class="textarea-box">
			<textarea :show-confirm-bar="false" class="textarea" v-model="post.content" placeholder="写下生活与理想" maxlength="-1"
				placeholder-style="color:#c1c1c1"></textarea>
		</view>
		<view class="media">
			<view class="picture" v-for="(item,index) in post.pictures" :key="index" @tap="ViewImage"
				:data-url="post.pictures[index]">
				<image  mode="aspectFill" style="width: 100%;height: 100%;" :src="post.pictures[index]"></image>
				<view class="media-icon" @tap.stop="DelImg(index)">
					<uni-icons type="close" size="25" color="#FFFFFF"></uni-icons>
				</view>
			</view>
			<view class="video" v-for="(item,index) in post.videos" :key="index">
				<video style="width: 100%;height: 100%;border-radius: 10rpx;" :src="post.videos[index]"></video>
				<view class="media-icon" @tap.stop="DelVideo(index)">
					<uni-icons type="close" size="25" color="#FFFFFF"></uni-icons>
				</view>
			</view>
			<view class="media-add" @tap="chooseMedia" v-if="post.pictures.length<9 && post.videos.length<1">
				<uni-icons type="camera" size="30" color="#2c2c2c"></uni-icons>
			</view>
		</view>
		<view class="tag-area">
			<view class="tag" @click="changeVisialbe(2)">
				<uni-icons v-if="post.visibility == 2" type="checkmarkempty" size="20" :style="{'color' : islandInfo.theme }"></uni-icons>
			</view>
			<view style="margin-left: 20rpx;">刻入公共记忆(剩余次数∞)</view>

		</view>

		<view class="tag-area">
			<view class="tag" @click="changeVisialbe(1)">
				<uni-icons v-if="post.visibility == 1" type="checkmarkempty" size="20" :style="{'color' : islandInfo.theme }"></uni-icons>
			</view>
			<view style="margin-left: 20rpx;">关注可见</view>
		</view>

		<uni-popup ref="mediaType" type="left">
			<view class="modal-box media-type">
				<view class="modal-title">选择照片或视频</view>
				<view class="modal-operations">
					<view @click="chooseMedia('image')">图片</view>
					<!-- <view @click="chooseMedia('video')">视频</view> -->
					<upload-auth 
						@click="chooseMedia('video')" 
						@succeed="onUploadSucceed" 
						@uniChooseComplete="finishVideoChoose"
					/>
				</view>
			</view>
		</uni-popup>



		<view class="emptyWarn animation-fade" v-show="showWarn">您输入的内容为空</view>

		<view class="footer">
			<view v-if="!post.id" class="footer-item" style="width: 150rpx;" @click="createOrUpdatePost(1)">
				<view
					style="height: 70rpx;width: 70rpx;background-color: #F2F2F2;border-radius: 50%;display: flex;flex-direction: row;justify-content: center;align-items: center;">
					<uni-icons type="folder-add" size="25" color="#A6A6A6"></uni-icons>
				</view>
				<view style="font-size: 24rpx;color: #A6A6A6;margin-top: 10rpx;">存草稿</view>
			</view>

			<view class="footer-item">
				<view class="footer-button"  :style="{'background-color' : islandInfo.theme }" @click="createOrUpdatePost(0)">
					{{post.id ? '更新记忆' : '新增记忆'}}
				</view>
			</view>
		</view>



	</view>
</template>

<script>
	import UploadOss from '@/common/util/UploadOss'
	import uniPopup from '../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
	import UploadAuth from '@/components/upload-auth.vue'
	export default {
		components: { uniPopup, UploadAuth },
		data() {
			return {
				islandInfo:{},
				showWarn: false,
				tagList: [{
					id: 0,
					label: '#话题'
				}, {
					id: 1,
					label: '@用户'
				}],
				post: {
					content: "",
					pictures: [],
					videos: [],
					visibility: 0,
					type: 0,
					isDraft: 0
				}
			}
		},
		onLoad(options) {
			if (options.islandId) {
				this.islandInfo.id = options.islandId
				this.getIslandInfo()
				
				this.post.islandId = options.islandId
				this.getPostDraftInfo()
			}
			
			if (options.postId) {
				this.post.id = options.postId
				this.getPostEditInfo()
			}
		},
		methods: {
			getIslandInfo() {
				this.$api.getIslandInfo({
					id: this.islandInfo.id
				}).then(res => {
					this.islandInfo = res.data;
					this.$forceUpdate()
				})
			},
			getPostDraftInfo() {
				this.$api.getPostDraftInfo({
					islandId: this.post.islandId
				}).then((res) => {
					if (res.data != null) {
						this.post = res.data
					}
				});
			},
			getPostEditInfo() {
				this.$api.getPostEditInfo({
					id: this.post.id
				}).then((res) => {
					this.post = res.data
				});
			},
			choseTag(id) {
				this.post.tagId = id
			},
			openMedia(type) {
				if (type === 'image') {
						uni.chooseImage({
							count: 9 - this.post.pictures.length, //默认9
							sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
							sourceType: ['album'], //从相册选择
							success: (res) => {
								UploadOss.uploadFile(res).then(res => {
									this.post.pictures.push(res)
									this.$refs.mediaType.close('bottom')
								})
							}
						});
					} else if(type === 'video') {
						// upload-auth 进行
					} else {
						this.$refs.mediaType.open('bottom')
					}
			},
			finishVideoChoose() {
				this.$refs.mediaType.close('bottom')
				// this.post.videos.push({}) // 空白图占位，上传成功后展示视频
			},
			onUploadSucceed(info) {
				// this.post.videos.pop()
				console.log(827, info)
			},
			chooseMedia(type = '') {
				if (type === '') {
					this.openMedia(this.mediaType)
				} else {
					this.mediaType = type
					this.openMedia(type)
				}
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.post.pictures,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(index) {
				this.post.pictures.splice(index, 1)
			},
			createOrUpdatePost(isDraft) {
				this.post.isDraft = isDraft
				if (this.post.id) {
					this.$api.updatePost(this.post)
						.then((res) => {
							uni.showToast({
								icon: 'success',
								title: "保存成功",
								duration: 500
							})
							uni.navigateBack()
						});
				} else {
					this.$api.createPost(this.post)
						.then((res) => {
							uni.showToast({
								icon: 'success',
								title: "保存成功",
								duration: 500
							})
							uni.navigateBack()
						});
				}
			
			},
			changeVisialbe(visibility) {
				this.post.visibility = this.post.visibility == visibility ? 0 : visibility
			},
			toBackPage() {
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
		},
		onNavigationBarButtonTap(e) {
			const text = this.post.content
			if (text === '') {
				console.log('输入为空')
				this.showWarn = true
				setTimeout(() => {
					this.showWarn = false
				}, 3500)
			} else {
				console.log('输入的内容为' + this.post)
				this.createPost()
				uni.navigateBack({})
			}
		},
	}
</script>

<style scoped lang="scss">
	.memory-create {

		.top {
			position: sticky;
			top: 0;
			background-color: white;
			// border-bottom: solid thin #d1d1d1;


			width: 100%;
			height: 80rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding-top: 100rpx;
			
			// #ifdef H5
			padding-top: 40rpx;
			// #endif
		}


		.textarea {
			width: 690rpx;
			min-height: 500rpx;
			padding: 30rpx;
			color: #000;
		}


		.modal-box {
			width: 600rpx;
			margin-left: 35rpx;
			margin-bottom: 20rpx;


			padding: 40rpx;
			border-radius: 20rpx;
			background: white;

			display: flex;
			flex-direction: column;
			justify-content: space-between;

			text-align: left;


			.modal-title {
				margin-bottom: 20rpx;
				font-size: 36rpx;
				font-weight: 600;
				text-align: center;
			}

			.modal-operations {
				display: flex;
				justify-content: space-around;
				width: 100%;
				margin-top: 20rpx;

				text-align: center;
			}

			.modal-operations > view {
				font-weight: bold;
				padding: 10rpx;
				border-radius: 10rpx;
				background-color: #6AB9C0;
				text-align: center;
				color: white;

				width: 40%;
			}

		}


		.media {
			padding: 30rpx 30rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;

			.media-icon {
				position: absolute;
				right: 10rpx;
				top: 10rpx;
			}

			.picture {
				position: relative;
				height: 220rpx;
				width: 220rpx;
				margin-right: 10rpx;
				margin-bottom: 10rpx;
				
				border-radius: 10rpx;
				overflow: hidden;
			}

			.video {
				border-radius: 10rpx;
				overflow: hidden;
			}

			.media-add {
				height: 220rpx;
				width: 220rpx;
				border: solid thin #d4d4d4;
				border-radius: 10rpx;

				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

		}

		.footer {
			position: fixed;
			background-color: #ffffff;
			height: 150rpx;

			width: 100%;
			bottom: 0;
			z-index: 3;
			border-top: solid thin #e7e7e7;

			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: center;

			.footer-item {
				width: 650rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;

				.text {
					font-size: 46rpx;
					font-weight: bold;

				}

				.footer-button {
					padding: 0 200rpx;
					height: 100rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					background-color: #5DACB1;
					border-radius: 50rpx;
					color: white;
				}
			}
		}
	}

	.emptyWarn {
		text-align: center;
		background-color: #d1d1d1;
		padding: 30rpx;
		width: 450rpx;
		border-radius: 70rpx;
		position: fixed;
		bottom: 150rpx;
		left: 150rpx;
	}



	.tag-area {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 20rpx;

		.tag {
			height: 40rpx;
			width: 40rpx;
			border: solid thin #d4d4d4;
			border-radius: 10rpx;
			margin-left: 30rpx;

			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;

		}

	}
</style>
